<template>
  <div>
    <el-card style="min-height: 600px">
      <el-row :gutter="24" style="background-color: #fcfcfc;padding: 5px 20px">
        <el-col :span="21">
          <el-button-group>
            <el-button type="success" icon="el-icon-back" @click="goBack">返回</el-button>
          </el-button-group>
        </el-col>
        <el-col :span="3">
          <el-button-group>
            <el-button type="primary" icon="el-icon-arrow-left" @click="toLast" />
            <el-button type="primary" icon="el-icon-arrow-right" @click="toNext" />
          </el-button-group>
        </el-col>
      </el-row>
      <el-row style="background-color: #fefefe">
        <el-col :span="15">
          <el-descriptions border style="margin-bottom: 5px">
            <el-descriptions-item label="方案名称" label-style="width:8%" content-style="width:20%">{{ quality.projectName }}</el-descriptions-item>
            <el-descriptions-item label="备注" :span="2" label-style="width:8%" content-style="width:23%">{{ quality.remark }}</el-descriptions-item>
            <el-descriptions-item label="来料单号" label-style="width:8%" content-style="width:23%">
              <span style="text-align: left;color: #81a4ff;font-weight: bold;font-size: 18px">{{ quality.ccode }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="供应商名称" label-style="width:8%" content-style="width:23%">{{ quality.cvenname }}</el-descriptions-item>
            <el-descriptions-item label="仓库名称" label-style="width:8%" content-style="width:23%">{{quality.cwhname}}</el-descriptions-item>
            <el-descriptions-item label="产品编码" label-style="width:8%" content-style="width:23%">{{ quality.cinvcode }}</el-descriptions-item>
            <el-descriptions-item label="产品名称" label-style="width:8%" content-style="width:23%">{{ quality.cinvname }}</el-descriptions-item>
            <el-descriptions-item label="产品规格" label-style="width:8%" content-style="width:23%">{{ quality.cinvstd }}</el-descriptions-item>
            <el-descriptions-item label="生产单号" label-style="width:8%" content-style="width:23%"></el-descriptions-item>
            <el-descriptions-item label="应用机型" label-style="width:8%" content-style="width:23%"></el-descriptions-item>
            <el-descriptions-item label="物料类别" label-style="width:8%" content-style="width:23%">
              {{quality.productType}}
            </el-descriptions-item>
            <el-descriptions-item label="质检等级" label-style="width:8%" content-style="width:23%">{{ quality.level }}</el-descriptions-item>
            <el-descriptions-item label="数量" label-style="width:8%" content-style="width:23%">{{ quality.qty }}</el-descriptions-item>
            <el-descriptions-item label="版本" label-style="width:8%" content-style="width:23%">
              {{quality.version}}
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="3">
          <div style="text-align: center">AQL值</div>
          <el-descriptions border style="margin-bottom: 5px" :column="1">
            <el-descriptions-item label="A" label-style="width:8%" content-style="width:23%">
              {{quality.aqla}}
            </el-descriptions-item>
            <el-descriptions-item label="B" label-style="width:8%" content-style="width:23%">
              {{quality.aqlb}}
            </el-descriptions-item>
            <el-descriptions-item label="C" label-style="width:8%" content-style="width:23%">
              {{quality.aqlc}}
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="3">
          <div style="text-align: center">AC值</div>
          <el-descriptions border style="margin-bottom: 5px" :column="1">
            <el-descriptions-item label="AC/A" label-style="width:8%" content-style="width:23%">
              {{quality.aca}}
            </el-descriptions-item>
            <el-descriptions-item label="AC/B" label-style="width:8%" content-style="width:23%">
              {{quality.acb}}
            </el-descriptions-item>
            <el-descriptions-item label="AC/C" label-style="width:8%" content-style="width:23%">
              {{quality.acc}}
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="3">
          <div style="text-align: center">RE值</div>
          <el-descriptions border style="margin-bottom: 5px" :column="1">
            <el-descriptions-item label="RE/A" label-style="width:8%" content-style="width:23%">
              {{quality.rea}}
            </el-descriptions-item>
            <el-descriptions-item label="RE/B" label-style="width:8%" content-style="width:23%">
              {{quality.reb}}
            </el-descriptions-item>
            <el-descriptions-item label="RE/C" label-style="width:8%" content-style="width:23%">
              {{quality.rec}}
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
      <el-tabs v-model="activeName" type="card" style="margin-top: 10px;">
        <el-tab-pane label="质检内容" name="质检内容">
          <el-table
            :data="quality.entitys"
            tooltip-effect="dark"
            border
            style="width: 100%;"
          >
            <el-table-column
              type="index"
              label="项次"
              width="50"
            />
            <el-table-column
              prop="planName"
              width="150px"
              label="测试项目"
            />
            <el-table-column
              prop="quotaName"
              width="150px"
              label="测试指标"
            />
            <el-table-column
              prop="specs"
              width="150px"
              label="规格"
            />
            <el-table-column
              prop="no1"
              width="120px"
              label="NO.1"
            />
            <el-table-column
              prop="no2"
              width="120px"
              label="NO.2"
            />
            <el-table-column
              prop="no3"
              width="120px"
              label="NO.3"
            />
            <el-table-column
              prop="no4"
              width="120px"
              label="NO.4"
            />
            <el-table-column
              prop="pda"
              width="50px"
              label="A"
            />
            <el-table-column
              prop="pdb"
              width="50px"
              label="B"
            />
            <el-table-column
              prop="pdc"
              width="50px"
              label="C"
            />
            <el-table-column
              prop="judge"
              width="90px"
              label="系统"
            />
            <el-table-column
              prop="result"
              width="110px"
              label="人工"
            />
            <el-table-column
              prop="remark"
              width="110px"
              label="备注"
            />
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="图片" name="图片">
          <el-card v-for="(item,index) in quality.images" :key="index" style="height: 200px;width: 200px;float: left">
            <el-image :key="item.id" :src="fileURL+item.imgUrl" :preview-src-list="[fileURL+item.imgUrl]" />
          </el-card>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <el-card>
      <el-descriptions border>
        <el-descriptions-item label="质检备注" label-style="width:2%" content-style="width:20%" :span="2">
          {{ quality.describe }}
        </el-descriptions-item>
        <el-descriptions-item label="质检判定" label-style="width:2%" content-style="width:20%">
          {{ quality.measurement }}
        </el-descriptions-item>
        <el-descriptions-item label="审核备注" label-style="width:2%" content-style="width:20%" :span="2">
          {{ quality.shremark }}
        </el-descriptions-item>
        <el-descriptions-item label="审核判定" label-style="width:2%" content-style="width:20%">
          {{ quality.shpanding }}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>
<script>
import { get } from '@/api/quality'
import { getNext } from '@/api/quality'
import { getLast } from '@/api/quality'
export default {
  name: 'InComeView',
  data() {
    return {
      fileURL: process.env.VUE_APP_BASE_API,
      activeName: '质检内容',
      quality: {}
    }
  },
  created() {
    this.getQuality(this.$route.query.id)
  },
  methods: {
    // 获取 easy-mock 的模拟数据
    getQuality(id) {
      get(id).then(res => {
        this.quality = res.data.data
      })
    },

    goBack() {
      this.$router.push({ path: 'inComeIndex' })
    },
    toNext() {
      getNext(this.$route.query.id).then(res => {
        this.$router.push({ path: 'incomeView', query: { id: res.data.data }})
        if (this.$route.query.id) {
          this.getQuality(this.$route.query.id)
        }
      })
    },
    toLast() {
      getLast(this.$route.query.id).then(res => {
        this.$router.push({ path: 'incomeView', query: { id: res.data.data }})
        if (this.$route.query.id) {
          this.getQuality(this.$route.query.id)
        }
      })
    }
  }
}
</script>

<style scoped>
  .handle-box {
    margin: 20px;
  }

  .handle-select {
    width: 120px;
  }

  .handle-input {
    margin: 10px;
    width: 300px;
    display: inline-block;
  }
  .table {
    width: 100%;
    font-size: 14px;
  }
  .red {
    color: #ff0000;
  }
  .hand-btn {
    margin: 5px;
  }
</style>
